[#escape x as (x)!?html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="atarm" />
<title>${node.name} -- ${site.fullNameOrName} --</title>
<link href="_files/jspxcms.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="${fore}/jquery.js" ></script>
<script language="javascript" type="text/javascript" src="_files/jquery.jcarousellite.min.js" ></script>
<script language="javascript" type="text/javascript" src="_files/common.js"></script>
<style>
html {zoom: expression(function(ele){ ele.style.zoom = "-1"; document.execCommand("BackgroundImageCache", false, true); }(this)); }
body {background-color:#000; }
		p { margin:0; padding:0;}
		/*幻灯片区域背景*/
		.MainBg { background-color:#222; }
		
		/*标题和页码*/
		.Title { color:#EEE; padding:5px 20px 0 20px; text-align:center; line-height:40px; height:40px; }
		.Title h1 { display:inline; }
		.Title .Counter { color:#666; }
		.Title .CounterCurrent { color:#C00; font-size:20px; font-weight:bold; }
		
		/*灰色分隔线*/
		.SpaceLine { border-bottom:1px solid #333; height:1px; font-size:1px; }
		
		/*大图展示区域*/
		.OriginalPicBorder { padding:15px 15px 0 15px; }
		#OriginalPic { width:930px; overflow:hidden; position:relative; font-size:12px; }
		#OriginalPic img { display: block; margin: 0 auto; }
		
		/*鼠标手势*/
		.CursorL { position: absolute; z-index:999; width:50%; height:600px; color:#FFF; left:0px; cursor:url(_files/images/CurL.cur), auto; background:url(_files/images/space.png) repeat scroll 0 0 transparent; }
		.CursorR { position: absolute; z-index:999; width:50%; height:600px; color:#FFF; right:0; cursor:url(_files/images/CurR.cur), auto; background:url(_files/images/space.png) repeat scroll 0 0 transparent; }
		
		/*小图预览和滑动*/
		.SliderPicBorder { width:920px; overflow:hidden;text-align:center; display:block;}
		.Summary {line-height:20px; display:block; margin-top:10px;padding-left:50px; color:#fff; overflow:hidden; background-color:#333; padding:10px; }
		.More { text-align:right; color:#666; line-height:40px; height:40px; font-size:12px; display:block; }        
		.ThumbPicBorder { display: inline-block; *display: inline; zoom: 1; }
		#ThumbPic img { border: 3px solid #666; cursor: pointer; background-color: #666; margin:0 4px; width: 130px; height: 80px; display: block; }
		#ThumbPic img.active { border: 3px solid #FF9900; }
</style>
</head>
<body>
<div style="height:40px;width:100%; line-height:40px;background:#fff url(_files/images/logo.png) 0px -14px no-repeat;padding-left:240px;">[#list node.hierarchy as n]<a href="${n.url}">${n.name}</a>[#if n_has_next]&nbsp;>&nbsp;[/#if][/#list]&nbsp;>&nbsp;正文</div>
 <form>    
   <div id="Container">
    <div class="MainBg">
     <div class="HS10"></div>
     <div class="Title">
        <h1>${info.title}</h1>
        <span class="Counter">（<span class="CounterCurrent">1</span>/${info.images?size}）</span> 
      </div>
      <div class="SpaceLine"></div>
      <div class="OriginalPicBorder">
        <div id="OriginalPic">
          <div id="aPrev" class="CursorL"></div>
          <div id="aNext" class="CursorR"></div>
          [#list info.images as image]
            <p class="Hidden">
             <span class="SliderPicBorder">
               <img src="${image.image}" />
             </span>
             <span class="Summary"> ${image.text!}</span>
             <span class="Clearer"></span>
						 <span class="More"><a href="${image.image}" target="_blank">查看原图</a>
						 <span class="OptLine">| </span><a href="${ctx}/node/48.jspx">更多图库</a></span>
            </p>
           [/#list]
        </div>
      </div>
      <div class="SpaceLine">
      </div>
      <div class="HS15">
      </div>
      <div style="width: 960px; text-align: center;">
        <div class="ThumbPicBorder">
          <img src="_files/images/ArrowL.jpg" id="btnPrev" class="FlLeft" style="cursor: pointer;" />
          <div class="jCarouselLite FlLeft">
            <ul id="ThumbPic">
            	[#list info.images as image]
              <li rel='${image_index+1}'>
                  <img src="${image.imageMin}" />
              </li>
              [/#list]
            </ul>
            <div class="Clearer"></div>
            </div>
            <img src="_files/images/ArrowR.jpg" id="btnNext" class="FlLeft" style="cursor: pointer;" />
            <div class="Clearer"></div>
         </div>
      </div>
      <div class="HS15"></div>
            
		<script type="text/javascript">
			//缩略图滚动事件
			$(".jCarouselLite").jCarouselLite({
					btnNext: "#btnNext",
					btnPrev: "#btnPrev",
					scroll: 1,
					speed: 240,
					circular: false,
					visible: 6
			});
    </script>
		<script type="text/javascript">
        var currentImage;
        var currentIndex = -1;

        //显示大图(参数index从0开始计数)
        function showImage(index) {
            //更新当前图片页码
            $(".CounterCurrent").html(index + 1);
            //隐藏或显示向左向右鼠标手势
            var len = $('#OriginalPic img').length;
            if (index == len - 1) {
                $("#aNext").hide();
            }
            else {
                $("#aNext").show();
            }

            if (index == 0) {
                $("#aPrev").hide();
            }
            else {
                $("#aPrev").show();
            }

            //显示大图            
            if (index < $('#OriginalPic img').length) {
								var indexImage = $('#OriginalPic p')[index];
	
								//隐藏当前的图
								if (currentImage) {
										if (currentImage != indexImage) {
												$(currentImage).css('z-index', 2);
	
												$(currentImage).fadeOut(0, function () {
														$(this).css({ 'display': 'none', 'z-index': 1 })
												});
										}
								}
	
								//显示用户选择的图
								$(indexImage).show().css({ 'opacity': 0.4 });
								$(indexImage).animate({ opacity: 1 }, { duration: 200 });
			
								//更新变量
								currentImage = indexImage;
								currentIndex = index;
			
								//移除并添加高亮
								$('#ThumbPic img').removeClass('active');
								$($('#ThumbPic img')[index]).addClass('active');
			
								//设置向左向右鼠标手势区域的高度                        
								//var tempHeight = $($('#OriginalPic img')[index]).height();
								//$('#aPrev').height(tempHeight);
								//$('#aNext').height(tempHeight);                        
          	}
        }

        //下一张
        function ShowNext() {
            var len = $('#OriginalPic img').length;
            var next = currentIndex < (len - 1) ? currentIndex + 1 : 0;
            showImage(next);
        }

        //上一张
        function ShowPrep() {
            var len = $('#OriginalPic img').length;
            var next = currentIndex == 0 ? (len - 1) : currentIndex - 1;
            showImage(next);
        }

        //下一张事件
        $("#aNext").click(function () {
            ShowNext();

            if ($(".active").position().left >= 144 * 5) {
                $("#btnNext").click();
            }
        });

        //上一张事件
        $("#aPrev").click(function () {
            ShowPrep();

            if ($(".active").position().left <= 144 * 5) {
                $("#btnPrev").click();
            }
        });

        //初始化事件
        $(".OriginalPicBorder").ready(function () {
            ShowNext();

            //绑定缩略图点击事件
            $('#ThumbPic li').bind('click', function (e) {
                var count = $(this).attr('rel');
                showImage(parseInt(count) - 1);
            });
        });
    </script>
        </div>
    </div>
   </form>
</body>
</html>
[/#escape]